@charset "UTF-8";

//
// @copyright        2017 opencart.cn - All Rights Reserved
// @link             http://www.guangdawangluo.com
// @author           Pu shuo <pushuo@opencart.cn>
// @created          2017-10-09 10:30:41
//
@media (min-width: 1200px){
    #menu {
        &> .container{
            width: 1200px;
            padding-left: 0;
            padding-right: 0;
        }
    }
}

#menu {
    background-color: $main_menu_wrapper_bg_color;
    min-height: $main_menu_height;
    border-top: $main_menu_border;
    //border-bottom: $main_menu_border;
    margin-bottom: $main_menu_margin_bottom;
    z-index: 1001;

    @media (max-width: 992px) {
        min-height: 40px;
        .container {
            width: 100%;
        }
    }

    .navigation {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
        .container {
            padding: 0;
            @media (min-width: 1200px) {
                width: 1200px;
            }
        }
        @media (max-width: 992px) {
            margin: 0;
            .navigation-dropdown{
                &> a{
                    height: 40px;
                    line-height: 40px;
                }
                .navigation-dropdown-panel{
                    display: none;
                }
            }
        }

        a {
            color: #ffffff;
        }

        > .navigation-dropdown {
            float: left;
            > .toggle-button{
                color: $menu_item_color;
            }

            .navigation-dropdown-panel{
                //@include transition(all .2s ease-out);
                //top: 140%;
                padding: 20px 0 100px;
                position: absolute;
                background: #222222;
                visibility: hidden;
                width: 100%;
                left: 0;
                border: 1px solid #222222;
                //&.active{
                //    visibility: visible;
                //    background: #222222;
                //}
                .children-name{
                    height:24px;
                    font-size:18px;
                    font-weight:bold;
                    line-height:24px;
                    color:rgba(51,51,51,1);
                    margin-bottom: 14px;
                }
                .children-grandchild{
                    margin-bottom: 30px;
                    a{
                        height:21px;
                        font-size:16px;
                        font-weight:400;
                        line-height:21px;
                        color:#FFFFFF;
                        margin-right: 30px;
                        &:hover{
                            color: #B2B2B2;
                        }
                    }
                }
            }


            @media (min-width: 992px) {
                &:hover{
                    .navigation-dropdown-panel{
                        display: block;
                        visibility: visible;
                        top: 100%;
                    }
                }
            }

            @media (min-width: 992px) {
                >.toggle-button {
                    //position: absolute;
                    //top: 50%;
                    margin-top: -9px;
                    right: 4px;
                }

                &:hover {
                    > a {
                        color: #ffffff;
                    }

                    > .toggle-button{
                        color: #ffffff;
                    }

                }

                > a {
                    //font-weight: bold;
                    height: $main_menu_height;
                    line-height: $main_menu_height;
                    padding: $menu_item_padding_left_right;
                    color: $menu_item_color;
                }

                &:first-child {
                    a {
                        padding-left: 0;
                    }
                }

            }

            @media (max-width: 992px) {
                &.active {
                    > a, .toggle-button {
                        color: $brand-primary;
                        i {
                            @include default-transform(rotate(-180deg));
                        }
                    }
                }
                >.toggle-button {
                    position: absolute;
                    top: 0;
                    padding: 10px;
                    cursor: pointer;
                    right: 0px;
                }

                float: none;
                border-bottom: 1px solid #e5e5e5;

                >a {
                    width: 84%;
                    color: #666;
                }

            }
        }
    }

    .navbar-header {
        height: 40px;
        width: 100%;
        margin: 0;

        .mobile-search {
            float: left;
            padding: 0 10px;
            height: 40px;
            width: 40px;
        }

        .mobile-nav-icon {
            height: 40px;
            width: 40px;
            float: right;
            background: $brand-primary;
            color: $menu_dropdown_bg_color;
        }
    }

    & + div.container{
        min-height: 400px;
    }
}
